<template>
  <cloudPage>
    <cloudHeader slot="gHeader">
      <view class="grace-header-body">
        <!-- 返回按钮 -->
        <view
          class="grace-header-icons grace-icons icon-arrow-left"
          @tap.stop="handleNavBack"
        ></view>
        <!-- 中间内容 -->
        <view class="grace-header-content-noflex grace-text-center">
          {{ $t("my.safe.editPayPassword") }}
        </view>
        <!-- 右侧按钮 -->
        <view class="icons grace-icons"></view>
      </view>
    </cloudHeader>

    <form
      @submit="formSubmitByPassword"
      class="grace-form"
      v-if="showPasswordForm"
    >
      <view class="gracy-body grace-margin-top container">
        <view class="list">
          <text class="grace-form-label color-w">
            {{ $t("my.safe.originalPassword") }}
          </text>
          <view class="grace-form-body">
            <input
              type="password"
              class="list_input"
              name="old_password"
              :placeholder="$t('my.safe.inputOriginalPassword')"
            />
          </view>
        </view>

        <view class="list">
          <text class="grace-form-label color-w">{{
            $t("my.safe.newPassword")
          }}</text>
          <view class="grace-form-body">
            <input
              type="password"
              class="list_input"
              name="password"
              :placeholder="$t('my.safe.inputNewPassword')"
            />
          </view>
        </view>

        <view class="list">
          <text class="grace-form-label color-w">
            {{ $t("my.safe.confirmPassword") }}
          </text>
          <view class="grace-form-body">
            <input
              type="password"
              class="list_input"
              name="password_confirmation"
              :placeholder="$t('my.safe.againInputNewPassword')"
            />
          </view>
        </view>
      </view>

      <view class="grace-padding grace-margin-top">
        <button
          type="primary"
          class="grace-button btn"
          formType="submit"
          :loading="loading['user.changePayPassword']"
        >
          {{ $t("my.safe.btn") }}
        </button>
      </view>

      <view
        class="grace-padding grace-padding-top grace-blue"
        style="text-align: right"
      >
        <text @tap.stop="showPasswordForm = false" style="color: #ffdb86">
          {{ $t("common.operate.forget") }}
        </text>
      </view>
    </form>

    <form @submit="formSubmitBySms" class="grace-form" v-else>
      <view class="gracy-body grace-margin-top container">
        <!-- <view class="grace-form-item grace-border-b grace-padding">
          <text class="grace-form-label">{{ $t("my.safe.newPassword") }}</text>
          <view class="grace-form-body">
            <input
              type="password"
              class="list_input"
              name="password"
              :placeholder="$t('my.safe.inputNewPassword')"
            />
          </view>
        </view> -->
        <view class="list">
          <text class="grace-form-label color-w">{{
            $t("my.safe.newPassword")
          }}</text>
          <view class="grace-form-body">
            <input
              type="password"
              class="list_input"
              name="password"
              :placeholder="$t('my.safe.inputNewPassword')"
            />
          </view>
        </view>

        <view class="list">
          <text class="grace-form-label color-w">
            {{ $t("my.safe.confirmPassword") }}
          </text>
          <view class="grace-form-body">
            <input
              type="password"
              class="list_input"
              name="password_confirmation"
              :placeholder="$t('my.safe.againInputNewPassword')"
            />
          </view>
        </view>

        <view class="list">
          <text class="grace-form-label color-w">{{
            $t("my.safe.captcha")
          }}</text>
          <view class="grace-form-body" style="width: 300rpx">
            <input
              type="text"
              class="list_input"
              name="code"
              :placeholder="$t('account.common.placeholder.captcha')"
            />
          </view>
          <view class="ml-auto code_btn">
            <cloudSendCode
              type="pay_password_reset"
              :value="basic"
              :category="category"
            ></cloudSendCode>
          </view>
        </view>
      </view>
      <view class="grace-padding grace-margin-top">
        <button
          type="primary"
          class="grace-button btn"
          formType="submit"
          :loading="loading['user.changePayPassword']"
        >
          {{ $t("my.safe.btn") }}
        </button>
      </view>

      <view
        class="grace-padding grace-padding-top grace-blue"
        style="text-align: right; color: #ffdb86"
      >
        <text @tap.stop="showPasswordForm = true" style="color: #ffdb86">
          {{ $t("my.safe.changeViaOldPassword") }}
        </text>
      </view>
    </form>
  </cloudPage>
</template>

<script>
var graceChecker = require("@/graceUI/jsTools/graceChecker.js");

import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      mobile: null,
      showPasswordForm: true,
    };
  },
  computed: {
    ...mapState("user", ["user"]),
    category() {
      if (this.user.mobile) return "mobile";
      else if (this.user.email) return "email";
    },
    basic() {
      if (this.user.mobile) return this.user.mobile;
      else if (this.user.email) return this.user.email;
    },
  },
  async onLoad() {
    await this.loadUser();
    this.mobile = this.$store.state.user.user.mobile;
  },
  methods: {
    ...mapActions("user", [
      "changePayPasswordByOldPassword",
      "changePayPasswordBySms",
      "changePayPasswordByEmail",
      "loadUser",
    ]),
    // 表单提交及验证
    formSubmitByPassword: function (e) {
      //定义表单规则
      var rule = [
        {
          name: "old_password",
          checkType: "numbers",
          checkRule: "6,6",
          errorMsg: this.$t("account.tips.password_length", { length: 6 }),
        },
        {
          name: "password",
          checkType: "numbers",
          checkRule: "6,6",
          errorMsg: this.$t("account.tips.password_length", { length: 6 }),
        },
        {
          name: "password_confirmation",
          checkType: "samewith",
          checkRule: "password",
          errorMsg: this.$t("account.tips.password_not_same"),
        },
      ];
      const formData = e.detail.value;
      //进行表单检查 e.detail.value 内存放着表单数据
      this.submit(formData, rule, "OldPassword");
    },
    formSubmitBySms(e) {
      var rule = [
        {
          name: "code",
          checkType: "numbers",
          checkRule: "6,6",
          errorMsg: this.$t("account.tips.captcha_length"),
        },
        {
          name: "password",
          checkType: "numbers",
          checkRule: "6,6",
          errorMsg: this.$t("account.tips.password_length", { length: 6 }),
        },
        {
          name: "password_confirmation",
          checkType: "samewith",
          checkRule: "password",
          errorMsg: this.$t("account.tips.password_not_same"),
        },
      ];
      const formData = e.detail.value;
      let type = this.category == "mobile" ? "Sms" : "Email";
      //进行表单检查 e.detail.value 内存放着表单数据
      this.submit({ ...formData, ...{ mobile: this.mobile } }, rule, type);
    },
    submit(formData, rule, byType) {
      console.log(formData);
      var checkRes = graceChecker.check(formData, rule);
      if (checkRes) {
        this[`changePayPasswordBy${byType}`](formData)
          .then(() => {
            this.makeToast(this.$t("common.tips.success"));
            setTimeout(() => {
              this.handleNavBack();
            }, 1500);
          })
          .catch(({ response }) => {
            this.makeToast(response.data.message);
          });
      } else {
        this.makeToast({ title: graceChecker.error, icon: "none" });
      }
    },
  },
};
</script>

<style scoped>
.list_input {
  text-align: left;
}
.btn {
  width: 516rpx;
  height: 100rpx;
  background-image: url("/static/auth/login/btn_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 55rpx;
  font-size: 34rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #2b2c3e;
  margin-bottom: 60rpx;
  line-height: 100rpx;
  position: absolute;
  bottom: 100rpx;
  left: 50%;
  transform: translateX(-50%);
}
.container {
  padding: 0 28rpx;
  box-sizing: border-box;
  width: 100%;
}
.list {
  height: 95rpx;
  background: linear-gradient(270deg, #1b1b2b 0%, #232534 100%);
  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.5);
  border-radius: 12rpx;
  margin-bottom: 34rpx;
  display: flex;
  padding: 0 34rpx;
  box-sizing: border-box;
}
.list_input {
  height: 95rpx;
  font-size: 28rpx;
  color: #fff;
}
.code_btn {
  padding-top: 24rpx;
}
</style>
